<template>
	<view class="sign-in-calendar">
		<u-navbar title="签到中心"  :autoBack="true" bgColor="#000000" fixed titleStyle="color: white;font-size:16px;"
		leftIconColor="#ffffff" placeholder>
			<view class="u-nav-slot f-base white" slot="right" style="color: white;" @click="toRule">签到规则</view>
		</u-navbar>
		<view class="p-20 flex-no-horizontal up">
			<view class="left">
				<u-image width="275rpx" height="329rpx" src="@/static/img/calendar-stone.png"></u-image>
			</view>
			<view class="right flex-no-horizontal">
				<view class="tip f-xs m-b-10">
					今日已签到，获得元石
				</view>
				<view class="ball bold flex-no-horizontal">
					+{{toDayStone}}
				</view>
			</view>
		</view>
		<view class="down">
			<view class="calendar">
				<view class="title flex-no-horizontal m-b-20">
					<text class="f-large bold">已连续签到 <text class="green" style="padding: 5px;">{{consequentDay}}</text>
						天</text>
					<text v-if="consequentDay == signRule.length - 1" class="f-xs">恭喜您已连续签到 {{consequentDay}} 天</text>
					<text class="f-xs" v-else>再签到 {{signMoreDay}} 天可获得 <text class="orange"
							style="padding: 5px;">{{signMoreStone}} </text>元石</text>
				</view>
				<view class="flex-no-horizontal">
					<view v-for="item in week" class="small-box f-xxs day grey" :key="item.id">{{item.label}}</view>
				</view>
				<view class="box flex-no-horizontal">
					<view v-for="i in preWeek" class="small-box day" :key="i"></view>
					<view v-for="(item, index) in currentMDay" class="flex-no-horizontal small-box day"
						:key="item.time">
						<view class="text-center f-xs m-b-5"
							:class="item.showDay >= currentDay || item.hasGetStone? '' : 'grey'">
							{{item.showDay == currentDay ? '今日' : item.showDay}}</view>
						<view class="circle flex-no-horizontal bold f-xxs"
							:class="{'is-checked': item.hasGetStone, 'special': item.special}">
							<u-icon v-if="item.showDay == currentDay" name="checkbox-mark" color="white" size="12">
							</u-icon>
							<text v-else-if="item.hasGetStone">+{{item.hasGetStone}}</text>
							<text v-else-if="item.mayGetStone">+{{item.mayGetStone}}</text>
							<text v-else class="grey" style="font-size: 9px;">未签</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<sign-in :show="isShowSign" @close="isShowSign = false" :signInData="signInData"></sign-in>
	</view>
</template>

<script>
	import {
		signInCalendar,
		signInApi
	} from '@/api/collection.js'
	import SignIn from './common/SignIn.vue'
	export default {
		components: {
			SignIn
		},
		data() {
			return {
				week: [{
						id: 101,
						label: '周日'
					},
					{
						id: 102,
						label: '周一'
					},
					{
						id: 103,
						label: '周二'
					},
					{
						id: 104,
						label: '周三'
					},
					{
						id: 105,
						label: '周四'
					},
					{
						id: 106,
						label: '周五'
					},
					{
						id: 107,
						label: '周六'
					},
				],
				currentMDay: [],
				preWeek: 0,
				lastMonthDayNum: 30,
				lastWeek: 0,
				currentYear: '',
				currentMonth: '',
				currentDay: '',
				isShowSign: false,
				signInData: {},
				consequentDay: 0,
				signRule: [],
				signInDays: [],
				signMoreDay: 0,
				signMoreStone: 0,
				toDayStone: 0
			}
		},
		async onLoad() {
			if (!this.$store.state.userInfo.isSign) {
				await this.signIn()
			}
			await this.inIt()
			this.findMore()
			uni.hideLoading()
		},
		methods: {
			create(year, month, day) {
					// 获得本月的1号是周几
					const firstDay = new Date(`${year}/${month}/1`).getDay()
					this.preWeek = firstDay === 7 ? 0 : firstDay
					const currentMNumber = new Date(year, month, 0).getDate()
					let monthArr = []
					for (let i = 0; i < currentMNumber; i++) {
						const time =
							`${year}-${month < 10 ? '0' + month : month}-${i + 1 < 10 ? '0' + (i + 1) : i + 1}`
						const index = this.signInDays.findIndex(day => day.created_at == time)
						let isChecked = false
						let hasGetStone = 0
						if (index > -1) {
							isChecked = true
							hasGetStone = this.signInDays[index].store
						}
						monthArr.push({
							showDay: i + 1,
							time,
							isChecked,
							mayGetStone: 0,
							hasGetStone,
							special: false
						})
					}
					const length = Math.min(currentMNumber, this.signRule.length)
					const maxConsequentDay = this.signRule.length - 1
					switch (this.consequentDay) {
						case maxConsequentDay:
							monthArr[day - 1].mayGetStone = this.signRule[maxConsequentDay - 1].store
							break;
						default:
							let startIndex = this.consequentDay
							let n = 0
							let i = day
							while (n < length && i <= currentMNumber && startIndex < this.signRule.length) {
								monthArr[i - 1].mayGetStone = this.signRule[startIndex].store
								monthArr[i - 1].special = this.signRule[startIndex].special
								startIndex++
								i++
								n++
							}
							break;
					}
					this.currentMDay = monthArr
				
			},
			async inIt() {
				uni.showLoading({})
				try{
					const res = await signInCalendar()
					this.timeStampTotime(res.data.server_time)
					this.toDayStone = res.data.today_store
					this.signRule = res.data.key_value
					this.consequentDay = res.data.continuous || 0
					this.signInDays = res.data.month_info
					this.create(this.currentYear, this.currentMonth, this.currentDay)
				}catch(e){
					console.log(e)
					uni.hideLoading()
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
				
			},
			async signIn() {
				uni.showLoading({})
				try {
					const res = await signInApi()
					this.signInData = {
						continue: res.data.continuous,
						stone: res.data.data.store,
						tomorrowStone: res.data.data.tomorrow_store
					}
					uni.hideLoading()
					this.isShowSign = true
					this.$store.dispatch('getUserInfo')
				} catch (e) {
					uni.hideLoading()
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
					//TODO handle the exception
				}
			},
			findMore() {
				for (let i = 0; i < this.signRule.length; i++) {
					if (this.signRule[i].special && this.consequentDay < i) {
						this.signMoreDay = i - this.consequentDay
						this.signMoreStone = this.signRule[i].store
						return
					}
				}
			},
			toRule() {
				uni.navigateTo({
					url: './signInRule'
				})
			},
			timeStampTotime(timeStamp) {
				const now = new Date(timeStamp * 1000)
				this.currentYear = now.getFullYear()
				this.currentMonth = now.getMonth() + 1,
				this.currentDay = now.getDate()
				console.log(this.currentYear,this.currentMonth,this.currentDay)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sign-in-calendar {
		background-color: #000000;
		min-height: 100%;

		.green {
			color: #20C566;
		}

		.orange {
			color: #FF8E2A;
		}

		.grey {
			opacity: 0.5;
		}

		.up {
			justify-content: space-between;
			padding-top: 85rpx;
			background: url(@/static/img/calenda-bg.jpg) no-repeat;
			background-size: contain;
			.right {
				flex-direction: column;

				.tip {
					width: 312rpx;
					height: 93rpx;
					text-align: center;
					line-height: 75rpx;
					background: url(@/static/img/calendar-tip.png) no-repeat;
					background-size: contain;
					color: white;
				}

				.ball {
					font-size: 24px;
					width: 121rpx;
					height: 121rpx;
					background: url(https://cdn3.relaverse.cn/appfile/calendar-ball.png) no-repeat;
					background-size: contain;
					color: white;
					justify-content: center;
				}
			}
		}

		.down {
			padding: 20rpx;

			.calendar {
				padding: 30rpx 30rpx 10rpx;
				background: #FFFFFF;
				border-radius: 20px;

				.title {
					justify-content: space-between;
					padding-bottom: 30rpx;
					padding-top: 10rpx;
					border-bottom: 1px solid rgba(20, 22, 27, 0.1);
				}
			}
		}

		.box {
			flex-wrap: wrap;
			width: 100%;
		}

		.small-box {
			padding: 0 0 30rpx;
			width: calc(100%/7);
			text-align: center;
		}

		.day {
			flex-direction: column;
			justify-content: center;

			.circle {
				width: 62rpx;
				height: 62rpx;
				border-radius: 50%;
				background-color: rgba(20, 22, 27, 0.05);
				justify-content: center;

			}

			.special {
				background-color: #FF8E2A;
				color: white;
			}

			.is-checked {
				background-color: #20C566;
				color: white;
			}
		}
	}
</style>
